<template>
  <div>
    <div class="recommend-title">
      商品详情<span @click="back" class="back">返回</span>
    </div>
    <div class="item border-bottom" v-if="recommend">
      <div class="item-img-wrapper">
        <img class="item-img" :src="imgBaseURL + recommend.imgUrl" />
      </div>
      <div class="item-info">
        <div class="item-title">{{ recommend.title }}</div>
        <div class="item-desc">{{ recommend.desc }}</div>
      </div>
    </div>
    <!-- detail start -->
    <div class="category" v-for="(category, index) of list" :key="index">
      <div class="category-title border-bottom">{{ category.title }}</div>
      <div class="category-wrapper border-bottom">
        <div class="category-subtitle">
          <div>{{ category.subTitle }}</div>
          <div class="category-desc">{{ category.desc }}</div>
        </div>
        <div class="category-price">{{ category.price }}</div>
      </div>
    </div>
    <!-- detail end -->
  </div>
</template>
<script>
/* eslint-disable */
import axios from "axios";

export default {
  name: "Detail",
  data() {
    return {
      recommendId: this.$route.params.recommendId,
      imgBaseURL: process.env.BASE_API,
      list: [],
      recommend: null,
    };
  },
  methods: {
    getInfo: function (id) {
      console.log(this.$route.params.recommendId);
      axios.defaults.baseURL = process.env.BASE_API;
      console.log(id);
      console.log(process.env.BASE_API);
      axios.get("/api/recommend/get/" + id).then(this.getInfoSucc);
    },
    getInfoSucc: function (res) {
      this.recommend = res.data;
      console.log(this.recommend);
    },
    getDetailInfo: function () {
      axios.defaults.baseURL = process.env.BASE_API;
      axios
        .get("/api/category/get/" + this.recommendId)
        .then(this.handleGetDataSucc);
    },
    handleGetDataSucc: function (res) {
      this.list = res.data;
    },
    back: function () {
      this.$router.back(-1);
    },
  },
  mounted() {
    this.getInfo(this.recommendId);
    this.getDetailInfo();
  },
  activated() {
    this.getInfo(this.recommendId);
    this.getDetailInfo();
  },
};
</script>
<style scoped>
.recommend-title {
  margin-top: 0.2rem;
  line-height: 0.8rem;
  background: #eee;
  text-indent: 0.2rem;
}

.item {
  overflow: hidden;
  display: flex;
  height: 1.9rem;
}

.item-img {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.1rem;
}

.item-info {
  flex: 1;
  padding: 0.1rem;
  min-width: 0;
}

.item-info .item-title {
  line-height: 0.54rem;
  font-size: 0.32rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.item-info .item-desc {
  line-height: 0.4rem;
  color: #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-more {
  line-height: 0.6rem;
  margin-top: 0.16rem;
  background: #ff9300;
  padding: 0 0.2rem;
  border-radius: 0.05rem;
  color: #fff;
}

.back {
  color: #ff9300;
  float: right;
  margin-right: 0.16rem;
}

.changePic {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  z-index: 99;
}

.category-title {
  line-height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.2rem;
}

.category-wrapper {
  display: flex;
  align-items: center;
}

.category-subtitle {
  flex: 1;
  line-height: 0.6rem;
  font-size: 0.3rem;
  padding: 0 0.5rem;
  font-weight: 800;
}

.category-desc {
  padding-left: 0.1rem;
  color: #999;
  font-size: 0.28rem;
}

.category-price {
  width: 1.8rem;
  text-align: center;
  font-size: 0.42rem;
  color: #ff9900;
}
</style>
